<template lang="pug">
	.s-code(@click="sendCode")
		button.verification-botton(:disabled="verdisabled" :time="time" plain="true" :phone="phone" :codeType="codeType" :text="text") {{text}}
</template>

<script>
export default {
	name: 'send-code',
	data() {
		return {
			verdisabled: false,
			tempTime: 120
		}
	},
	props: {
		phone: {
			type: String,
			default: ''
		},
		time: {
			type: Number,
			default: 60
		},
		codeType: {
			type: String,
			default: ''
		},
		text: {
			type: String,
			default: '发送验证码'
		}
	},
	created() {},
	mounted() {},
	methods: {
		settime() {
			let timers = setInterval(() => {
				this.tempTime--
				this.text = '重新发送(' + this.tempTime + 's)'
				if (this.tempTime <= 0) {
					this.text = '重新发送'
					this.verdisabled = false
					clearInterval(timers)
				}
			}, 1000)
		},
		sendCode() {
			if (!this.tools.isMobile(this.phone) || this.phone.length < 11) {
				this.wx.showToast({
					title: '请检查手机号',
					icon: 'none'
				})
				return false
			}
			if (this.verdisabled === true) {
				return false
			}
			let that = this
			this.api.jtApi
				.sendCode({
					phone: this.phone.toString(),
					type: this.codeType
				})
				.then(data => {
					if (data.ret_code === '0') {
						this.wx.showToast({
							title: data.ret_info,
							icon: 'none'
						})
						that.verdisabled = true
						that.tempTime = that.time
						this.settime()
					} else {
						this.wx.showToast({
							title: data.ret_info,
							icon: 'none'
						})
					}
				})
				.catch(() => {})
		}
	}
}
</script>

<style scoped lang="stylus">
	.verification-botton
		min-width 100%
		text-align center
		font-size 28px
		height 100%
		color themeColor
		font-weight 600
		white-space nowrap
		border-width 0
		&[plain][disabled] {
			color #aaa!important
			background-color transparent
			border-width 0
		}
</style>
